<template>
  <div>
    <el-row>
      <el-button-group>
        <el-button icon="el-icon-refresh" type="primary" size="small" :disabled="!connName" @click="refreshThreads">刷新</el-button>
      </el-button-group>

    </el-row>
    <el-row>
      <div style="position: sticky;top: 0">
        <ul class="legend-wrapper" style="list-style-type: none">
          <li>运行 <span class="legend RUNNABLE" /></li>
          <li>阻塞 <span class="legend BLOCKED" /></li>
          <li>终止 <span class="legend TERMINATED" /></li>

          <li>等待 <span class="legend WAITING" /></li>
          <li>等待(TIMED_WAITING) <span class="legend TIMED_WAITING" /></li>
          <li>新线程 <span class="legend NEW" /></li>

        </ul>
      </div>

      <el-col :span="8">
        <div style="height: 80vh; overflow-y: scroll">
          <el-tree
            ref="accessResourceTree"
            :data="threadTree"
            :expand-on-click-node="false"
            :default-expand-all="true"
            :highlight-current="true"
            :props="{label: 'name'}"
            @node-click="clickNode"
          >
            <div slot-scope="{ node, data }" class="custom-tree-node">
              <span :class="(data.threadState || 'folder') + ' tree-node'">{{ data.name }}</span>
            </div>
          </el-tree>
        </div>

      </el-col>

      <el-col v-if="choseThreadDetail" :span="16">
        <el-descriptions size="small" border>
          <el-descriptions-item label="名称">{{ choseThreadDetail.threadName }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ choseThreadDetail.threadState }}</el-descriptions-item>
          <el-descriptions-item label="等待数">{{ choseThreadDetail.waitedCount }}</el-descriptions-item>
          <el-descriptions-item label="等待时长">{{ choseThreadDetail.waitedTime }}</el-descriptions-item>
          <el-descriptions-item label="阻塞数">{{ choseThreadDetail.blockedCount }}</el-descriptions-item>
          <el-descriptions-item label="阻塞时长">{{ choseThreadDetail.blockedTime }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions size="small" class="margin-top" border>
          <el-descriptions-item label="锁名称">{{ choseThreadDetail.lockName }}</el-descriptions-item>
          <!--          <el-descriptions-item label="类HASH">-->
          <!--            <template v-if="choseThreadDetail.lockInfo">-->
          <!--              {{choseThreadDetail.lockInfo.className + '@' + choseThreadDetail.lockInfo.identityHashCode}}-->
          <!--            </template>-->
          <!--          </el-descriptions-item>-->
          <el-descriptions-item v-if="choseThreadDetail.lockOwnerName" label="当前拥有者">{{ choseThreadDetail.lockOwnerName + ' ( '+choseThreadDetail.lockOwnerId+' )' }}</el-descriptions-item>
        </el-descriptions>

        <el-table
          :data="choseThreadDetail.stackTrace"
          size="mini"
          border
          stripe
          height="300"
          highlight-current-row
          class="margin-top"
        >
          <el-table-column
            label="信息"
          >
            <template slot-scope="scope">
              <div :class="scope.row.nativeMethod ? 'native stack-info': 'normal stack-info'">{{ scope.row.className + '.' + scope.row.methodName + '('+scope.row.lineNumber+')' }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import jvm from '@/api/jvm'

export default {
  name: 'Threadview1',
  props: {
    connName: {
      type: String
    }
  },
  data() {
    return {
      threadTree: [],
      choseThreadDetail: {}
    }
  },
  methods: {
    init() {
      if (this.connName) {
        this.refreshThreads()
      }
    },
    refreshThreads() {
      jvm.thread.listTree(this.connName).then(res => {
        this.threadTree = res.data
      })
    },
    clickNode(data, node, el) {
      if (!data.id) {
        // 点击目录是无效的
        return
      }
      // 查询当前线程详情
      jvm.thread.detail(this.connName, data.id).then(res => {
        this.choseThreadDetail = res.data
      })
    }
  }
}
</script>

<style scoped>
  .custom-tree-node .tree-node{

  }
  .custom-tree-node .tree-node.folder{

  }

  .legend-wrapper{
    list-style-type: none;
    width: 500px;
    display: flex;
    align-content: space-between;
    align-items: center;
  }

  .legend-wrapper>li{
    padding: 3px;
  }

  .legend{
    width: 40px;
    height: 5px;
    display: inline-block;
  }

  .legend.RUNNABLE{
    background-color: green;
  }
  .custom-tree-node .tree-node.RUNNABLE{
    color: green;
  }

  .legend.BLOCKED{
    background-color: darkred;
  }
  .custom-tree-node .tree-node.BLOCKED{
    background-color: darkred;
  }

  .legend.WAITING{
    background-color: #0000ff;
  }
  .custom-tree-node .tree-node.WAITING{
    color: #0000ff;
  }

  .legend.TIMED_WAITING{
    background-color: #1d8ce0
  }
  .custom-tree-node .tree-node.TIMED_WAITING{
    color: #1d8ce0;
  }

  .legend.TERMINATED{
    background-color:gray;
  }
  .custom-tree-node .tree-node.TERMINATED{
    color: gray;
  }

  .legend.NEW{
    background-color: #c5ef12;
  }
  .custom-tree-node .tree-node.NEW{
    background-color: #c5ef12;
  }

  .stack-info{

  }
  .stack-info.native{
    color: #c99292;
  }
</style>
